<template>
    <div>
        <el-radio-group v-model="radio1" size="medium ">
            <el-radio-button label="处理"></el-radio-button>
            <el-radio-button label="无法处理"></el-radio-button>
            <el-radio-button label="流转"></el-radio-button>

        </el-radio-group>
        <div style="margin-top:40px" v-if="radio1 == '处理'">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-row type="flex" :gutter="10">
                    <el-col :span="24">
                        <el-form-item label="上传图片" prop="replyImg">
                            <el-upload-image :limit="5" v-model="form.replyImg"></el-upload-image>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="备注" prop="CLreply">
                            <el-input type="textarea" rows="5" v-model="form.CLreply"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" style="margin-top:40px">
                    <el-button type="primary" icon="el-icon-check" @click="CLbtn()">完成</el-button>
                </el-row>
            </el-form>
        </div>

        <div style="margin-top:40px" v-if="radio1 == '无法处理'">
            <el-form ref="form1" :rules="rules1" :model="form1">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item prop="NoCLreply" label="无法处理原因">
                            <el-input type="textarea" rows="5" v-model="form1.NoCLreply"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" style="margin-top:40px">
                    <el-button type="primary" icon="el-icon-check" @click="NoCLbtn">完成</el-button>
                </el-row>
            </el-form>
        </div>

        <div style="margin-top:40px" v-if="radio1 == '流转'">
            <el-form ref="form2" :rules="rules2" :model="form2">
                <el-row :gutter="10">
                    <el-col :span="13">
                        <el-form-item prop="admin_id" label="流转管理中心" label-width="110px">
                            <el-select v-model="form2.admin_id" placeholder="请选择管理中心">
                                <el-option v-for="item in managementCenter" :key="item.id" :label="item.nickname" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="13">
                        <el-form-item label="备注" label-width="110px">
                            <el-input type="textarea" rows="5" v-model="form2.NoCLreply"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center" style="margin-top:40px">
                    <el-button type="primary" icon="el-icon-check" @click="liuzhuan">完成</el-button>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { post } from '@/assets/js/http.js'
export default {
    props: {
        rowData: {
            type: Object,
            default: () => { }
        },
        managementCenter: {
            type: Array,
        }
    },
    data() {
        return {
            form: {
                CLreply: "",
                replyImg: [],
            },
            rules: {
                CLreply: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ],
                // replyImg: [
                //     { required: true, message: '请上传图片', trigger: 'blur' },
                // ],
            },
            form1: {
                NoCLreply: "",
            },
            rules1: {
                NoCLreply: [
                    { required: true, message: '请输入无法处理原因', trigger: 'blur' },
                ],
            },
            form2: {
                admin_id: "",
                NoCLreply: ""
            },
            rules2: {
                admin_id: [
                    { required: true, message: '请输入选择管理中心', trigger: 'blur' },
                ],
            },
            radio1: "处理",
        }
    },
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    methods: {
        //处理
        CLbtn() {
            // console.log(this.reply_img, 'reply_img')
            // return
            let imgs = this.form.replyImg.map(i => i.url)
            imgs = imgs.join("|")
            this.$refs.form.validate((valid) => {
                if (valid) {
                    post({
                        url: "/admin/answer.Subject/handle_work",
                        data: {
                            id: this.rowData.id,
                            cl_status: 1,//0中心处理1路网审核2处理完成3处理失败4处理不了提交路网
                            reply: this.form.CLreply,
                            reply_img: imgs
                        },
                        loading: true,
                        successTip: true
                    }).finally(() => {
                        this.$emit("closePopover", false)
                    })
                } else {
                    return false;
                }
            });

        },
        //无法处理
        NoCLbtn() {
            this.$refs.form1.validate((valid) => {
                if (valid) {
                    post({
                        url: "/admin/answer.Subject/handle_work",
                        data: {
                            id: this.rowData.id,
                            cl_status: 4,//0中心处理1路网审核2处理完成3处理失败4处理不了提交路网
                            reply: this.form1.NoCLreply
                        },
                        loading: true,
                        successTip: true
                    }).finally(() => {
                        this.$emit("closePopover", false)
                    })
                } else {
                    return false;
                }
            })
        },
        // 流转
        liuzhuan() {
            this.$refs.form2.validate((valid) => {
                if (valid) {
                    post({
                        url: "/admin/answer.Subject/handle_work",
                        data: {
                            id: this.rowData.id,
                            cl_status: 4,//0中心处理1路网审核2处理完成3处理失败4处理不了提交路网
                            type: 1,
                            reply: this.form2.NoCLreply,
                            l_admin_id: this.form2.admin_id
                        },
                        loading: true,
                        successTip: true
                    }).finally(() => {
                        this.$emit("closePopover", false)
                    })
                } else {
                    console.log(1);
                    return false;
                }
            })
        }
    }
}
</script>

<style></style>